<!-- 阜新抽奖活动 -->
<template>
  <div class="wrap">
    <img src="../../assets/fx/bg.png" class="bgol" alt="" />
    <div class="block-2">
      <p class="title">我的锦鲤号</p>
      <img src="../../assets/fx/line.png" class="line" alt="" />

      <div class="num-list">
        <p
          v-for="(item, index) in list"
          :key="index"
          :class="
            item.isActiveluck == 1
              ? 'p1'
              : item.isActiveluck == 2
              ? 'p2'
              : item.isActiveluck == 3
              ? 'p3'
              : item.isActiveluck == 4
              ? 'p4'
              : ''
          "
        >
          {{ item.num }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: []
    }

  },
  mounted () {
    let nums = localStorage.getItem('nums')
    console.log(nums)
    this.list = JSON.parse(nums)
  },
  methods: {

  }
}
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.num-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.28rem;
  p {
    background: url('../../assets/fx/textbg.png') no-repeat;
    background-size: cover;
    width: 1.46rem;
    height: 0.59rem;
    color: #fd8b66;
    font-size: 0.26rem;
    text-align: center;
    line-height: 0.59rem;
    margin-right: 0.1rem;
    margin-bottom: 0.26rem;
    position: relative;
    z-index: 12;
  }
  p:nth-of-type(4n) {
    margin-right: 0rem;
  }
  .p1 {
    background: url('../../assets/fx/p1.png') no-repeat;
    background-size: cover;
    color: #fff;
  }
  .p2 {
    background: url('../../assets/fx/p2.png') no-repeat;
    background-size: cover;
    color: #516ea3;
  }
  .p3 {
    background: url('../../assets/fx/p3.png') no-repeat;
    background-size: cover;
    color: #fff;
  }
  .p4 {
    background: url('../../assets/fx/p4.png') no-repeat;
    background-size: cover;
    color: #fff;
  }
}

.block-2 {
  position: relative;
  background-size: cover;
  width: 6.7rem;
  overflow-y: scroll;
  margin-top: 0.4rem;
  left: 0.4rem;
  background: #fff1e6;
  .title {
    color: #855d34;
    font-size: 0.36rem;
    text-align: center;
    margin-top: 0.4rem;
  }
  .line {
    width: 3.84rem;
    height: 0.17rem;
    display: block;
    margin: 0.3rem auto;
  }
}
.bgol {
  width: 100%;
  height: 6.78rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}
.wrap {
  background: #fff1e6;
  min-height: 100vh;
  padding-bottom: 1.26rem;
}
</style>